"use client";

import { useEffect, useState } from "react";

export default function LeafFall() {
  const [leaves, setLeaves] = useState<number[]>([]);

  useEffect(() => {
    setLeaves(Array.from({ length: 25 }, (_, i) => i));
  }, []);

  return (
    <div className="leaf-fall-container fixed inset-0 -z-20 pointer-events-none overflow-hidden">
      {leaves.map((i) => {
        const left = `${Math.random() * 100}vw`;
        const duration = 10 + Math.random() * 6;
        const delay = -Math.random() * 12;
        const swayDuration = 3 + Math.random() * 2;
        const size = 16 + Math.random() * 12;
        const opacity = 0.2 + Math.random() * 0.2;
        const color = `rgba(163,153,145,${opacity.toFixed(2)})`;
        const borderRadius = `${30 + Math.random() * 30}% ${
          30 + Math.random() * 30
        }% ${30 + Math.random() * 30}% ${30 + Math.random() * 30}% / ${
          30 + Math.random() * 30
        }% ${30 + Math.random() * 30}% ${30 + Math.random() * 30}% ${
          30 + Math.random() * 30
        }%`;

        return (
          <div
            key={i}
            className="leaf-wrapper absolute top-0 animate-fall"
            style={{
              left,
              animationDuration: `${duration.toFixed(1)}s`,
              animationDelay: `${delay.toFixed(1)}s`,
            }}
          >
            <div
              className="leaf animate-sway"
              style={{
                width: `${size}px`,
                height: `${size}px`,
                backgroundColor: color,
                borderRadius,
                animationDuration: `${swayDuration.toFixed(1)}s`,
              }}
            />
          </div>
        );
      })}
    </div>
  );
}
